<template>
  <div class="qa-form-box">

    <el-scrollbar>
      <el-form size="large" :model="modelValue" :rules="rules" status-icon ref="ruleFormRef" :labelWidth="labelWidth"
        class="qa-form">
        <qa-form-item v-for="item, index in columns" :columnsIndex="index" :placeholder="item.placeholder" :label="item.title" :type="item.type" :key="item.key"
          :prop="item.key" :disabled="item.disabled" :data="item.data" v-model="modelValue[item.key]" :columns="item.columns" :action="item.action" :props="item.props"
          :tips="item.tips"
          :multiple="item.multiple" :query-columns="item.queryColumns" :watch="item.watch" :formData="modelValue"></qa-form-item>

        <slot name="menuList" />
        <slot name="permissionList" />
      </el-form>
    </el-scrollbar>
    <div class="dialog-footer flex justify-end">
      <el-button @click="closeDialog">关闭</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading">
        确定
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import Http from '@/util/request'
import type { FormInstance, FormRules } from 'element-plus'
import qaFormItem from './qa-form-item.vue';

interface Columns {
  key: string;
  title: string;
  type: string;
  width?: number; // 可选字段
  minWidth?: number;
  align?: string;
  mode?: string;
  disabled?: boolean;
  placeholder?: string;
  data?: any[];
  props?: any;
  columns?: Columns[];
  queryColumns?: Columns[],
  action?: string;
  multiple?:boolean;
  tips?:string;
  watch?: (val:any,formData:any,column:Columns[],index:number,option:any)=> void;
}


const props = withDefaults(
  defineProps<{
    modelValue: any;
    rules?: FormRules;
    action?: string;
    formType?: 'add' | 'update';
    columns?: Columns[];
    labelWidth?: number;
    beforeAction?: (data: any) => any;
    closeDialog?: () => void;
  }>(),
  {
    beforeAction: (data: any) => data,
  }
)
const emit = defineEmits(['success', 'update:modelValue']);

const loading = ref(false)

const ruleFormRef = ref<FormInstance>()


const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      loading.value = true

      try {
        const res = await Http.request({
          url: props.action,
          method: 'post',
          data: props.beforeAction(props.modelValue)
        })
        ElMessage.success(props.formType === 'add' ? '添加成功' : '修改成功')
        emit('success')
      } finally {
        loading.value = false
      }

    } else {
      console.log('error submit!', fields)
    }
  })
}

const closeDialog = () => {
  if (props.closeDialog) {
    props.closeDialog();
  }

  if (ruleFormRef.value) {
    ruleFormRef.value.clearValidate()
  }
}

</script>

<style scoped lang="less">
.qa-form-box {

  .qa-form {
    max-height: calc(-125px + 93vh);
    height: calc(100%-15px);
    padding: 30px 20px;
    box-sizing: border-box;
  }
}
</style>
